<template>


  <div class="message-page">

    <!-- 顶部导航栏 -->
    <van-nav-bar title="消息" right-text="..." right-arrow>
      <template #left-icon>
        <van-icon name="arrow-left" size="20px"/>
      </template>
      <template #right-icon>
        <van-icon name="delete" size="20px"/>
      </template>
    </van-nav-bar>
    <div v-if="islogin==true">
      <!-- 消息分类 -->
      <div class="message-categories">
        <van-icon name="smile-o" size="24px"/>
        <van-badge dot>回复我的</van-badge>
        <br>
        <van-icon name="at" size="24px"/>
        <van-badge dot>@我</van-badge>
        <br>
        <van-icon name="like-o" size="24px"/>
        <van-badge dot>被赞</van-badge>
        <br>
        <van-icon name="user" size="24px"/>
        <van-badge dot>粉丝</van-badge>
      </div>
      <div @click="toliao">
        <van-row>
          <van-col span="2"></van-col>
          <van-col span="4">
            <van-image
                round
                width="70"
                height="70"
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
          </van-col>
          <van-col span="10">
            <br>
            &nbsp;&nbsp;&nbsp;&nbsp;
            AI小蜜
          </van-col>
        </van-row>
      </div>

      <!-- 消息列表 -->
      <!--    <div class="message-list">-->
      <!--      &lt;!&ndash; 示例消息项 &ndash;&gt;-->
      <!--      <div class="message-item">-->
      <!--        &lt;!&ndash;        <van-avatar round src="https://img.yzcdn.cn/vant/cat.jpeg"/>&ndash;&gt;-->
      <!--        &lt;!&ndash;        <div class="message-content" v-for="(item,key) in userlist" :key="key">&ndash;&gt;-->
      <!--        &lt;!&ndash;          <div class="message-header" @click="ask(item.id)">&ndash;&gt;-->
      <!--        &lt;!&ndash;            <span class="message-sender">&ndash;&gt;-->
      <!--        &lt;!&ndash;              {{ item.name }}&ndash;&gt;-->
      <!--        &lt;!&ndash;            </span>&ndash;&gt;-->
      <!--        &lt;!&ndash;          </div>&ndash;&gt;-->
      <!--        &lt;!&ndash;        </div>&ndash;&gt;-->
      <!--        &lt;!&ndash;        <br>&ndash;&gt;-->
      <!--        &lt;!&ndash;        <div class="message-body" v-for="(item,key) in meslist" :key="key">{{ item }}</div>&ndash;&gt;-->
      <!--        {{ answer }}-->
      <!--      </div>-->
      <!--      <van-form @submit="onSubmit">-->
      <!--        <van-cell-group inset>-->
      <!--          <van-field-->
      <!--              v-model="sendmes"-->
      <!--              name="内容"-->
      <!--              label="内容"-->
      <!--              placeholder="内容"-->

      <!--          />-->

      <!--        </van-cell-group>-->
      <!--        <div class="button-container">-->
      <!--          <van-button round block type="primary" native-type="submit">-->
      <!--            提交-->
      <!--          </van-button>-->
      <!--        </div>-->
      <!--      </van-form>-->
      <van-uploader :after-read="touploadimg">
        <van-button icon="plus" type="primary">上传新闻数据</van-button>
      </van-uploader>
      <!--    </div>-->
    </div>
    <div v-if="islogin==false">
      <div class="message-page">
        <div class="content">
          <!--        <img src="https://via.placeholder.com/150" alt="message-icon" class="message-icon"/>-->
          <p class="tip - text">登录后才可查看消息哦~</p>
          <van-button type="danger" round class="login - button" @click="tologin">立即登录</van-button>
        </div>
      </div>

    </div>

  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import axios from "axios";
import {showSuccessToast} from "vant";
import router from "@/router";
// import http from '../http';


// const userlist = ref([])
// const meslist = ref([])
// const socket = ref()
// const usersocket = ref()
// const sendmes = ref('')
// const userid = ref()
// const answer = ref('')
// const connlist = ref([])
// const flag = ref(true)
// const hmesslist = ref([])
const islogin = ref(false)
const toliao = () => {
  let id = localStorage.getItem('userid')
  router.push('/liao?id=' + id)
}
const tologin = () => {
  router.push('/login')
}
// const onSubmit = () => {
//   axios.post('/user/DataManage/', {'ask': sendmes.value}).then(res => {
//     answer.value = res.data.res
//   })
// }
// const ask = (uid) => {
//   if (userid.value != uid) {
//     hmesslist.value.push({"id": userid.value, 'mess': JSON.stringify(meslist.value)})
//     meslist.value = []
//     hmesslist.value.forEach(m => {
//       if (m.id == uid) {
//         meslist.value = JSON.parse(m.mess)
//       }
//     })
//
//   }
//   userid.value = uid
//   var room = 'user' + uid
//   //判断链接是否存在，如果存在不用创建，不存在创建
//   connlist.value.forEach(e => {
//     //{"id":uid,'conn':}
//     if (e.id == uid) {
//       usersocket.value = e.conn
//       flag.value = false
//     }
//   })
//   if (flag.value) {
//     usersocket.value = new WebSocket("ws://localhost:8000/room/" + room + "/");
//     connlist.value.push({"id": uid, 'conn': usersocket.value})
//   }
//   // 当客户端和服务端刚创建好连接(self.accept)之后，自动触发.
//   usersocket.value.onopen = () => {
//     console.log("连接成功")
//   }
//   // 回调函数，客户端接收服务端消息
//   usersocket.value.onmessage = (event) => {
//     var data = JSON.parse(event.data)
//     console.log(data)
//     console.log(userid.value)
//     if (data['from'] == userid.value) {
//       meslist.value.push({"message": data['message']})
//     } else {
//       hmesslist.value.forEach(m => {
//         if (m.id == data['from']) {
//           var mes = JSON.parse(m.mess)
//           mes.push({"message": data['message']})
//           m.mess = JSON.stringify(mes)
//         }
//       })
//     }
//   }
// }
//
// const initwebsocket = () => {
//   var room = '1001'
//   socket.value = new WebSocket("ws://localhost:8000/room/" + room + "/");
//   // 当客户端和服务端刚创建好连接(self.accept)之后，自动触发.
//   socket.value.onopen = () => {
//     console.log("连接成功")
//   }
//
//   // 回调函数，客户端接收服务端消息
//   socket.value.onmessage = (event) => {
//     var data = JSON.parse(event.data)
//     userlist.value.push(data)
//
//   }
// }

const touploadimg = (file) => {
  let formData = new FormData()
  formData.append('file', file.file)
  axios.post('http://localhost:8000/user/uploaduserhead/', formData).then(() => {
    axios.post('http://localhost:8000/user/DatmManage/', {'url':file.file.name}).then(()=>{
      showSuccessToast('数据上传成功')
    })
  })
}

onMounted(() => {
  // initwebsocket()
  if (localStorage.getItem("token") != null) {
    islogin.value = true
  } else {
    islogin.value = false

  }
})


</script>

<style scoped>
.message-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.message-categories {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.message-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.message-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.message-content {
  flex: 1;
  margin-left: 10px;
}

.message-header {
  justify-content: space-between;
}

.message-sender {
  font-weight: bold;
}

.official-tag {
  background-color: #f56a00;
  color: #fff;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 12px;
  margin-left: 5px;
}

.message-time {
  font-size: 12px;
  color: #999;
}

.message-body {
  margin-top: 5px;
}

.stranger-tip {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 10px;
}

.stranger-tip-content {
  background-color: #fff;
  padding: 10px;
  border-radius: 4px;
}

.mutual-follow-tag {
  background-color: #19be6b;
  color: #fff;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 12px;
  margin-left: 5px;
}

</style>